<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: 晋龍
 * @LastEditTime: 2022-01-10 19:18:18
-->
<template>

  <div ref="bottom1_container" style="height:95%"></div>

</template>

<script>
import {Pie} from '@antv/g2plot';
import {get} from '../../../utils/request'
import { DEFAULT_COLOR } from '@antv/g2plot/lib/plots/gauge/constants';
import { withDirectives } from 'vue';
import { left } from '@antv/g2plot/lib/plots/sankey/sankey';
export default {
  data (){
    return{
       dataArr:[]
     }
  },
  created(){

  },
mounted(){
this.initData()
},
methods:{
  initData(){
    get('/dashboard/queryEngineerBindDeviceNumber').then(res=>{
        
        this.dataArr = res.data
        this.initChart()
      })
  },
initChart(){
  const pie = new Pie(this.$refs.bottom1_container,{
 
 appendPadding: 0,
  data:this.dataArr,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.7,
  label: {
    type: 'inner',
    offset: '-50%',
    autoRotate: false,
    style: { textAlign: 'center' },
  },
  statistic: {
    title: {
      offsetY: -2,
      style:{fontSize:15,color:'pink'}
    },
    content: {
      offsetY: 1,
      style:{fontSize:15,color:'pink'}
    },
  },
  // 添加 中心统计文本 交互
  interactions: [
    { type: 'element-selected' },
    { type: 'element-active' },
    {
      type: 'pie-statistic-active',
      cfg: {
        start: [
          { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
          { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
        ],
        end: [
          { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
          { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
        ],
      },
    },
  ],
});

pie.render();
}
}
}
</script>
